<template>
  <div class="container">
    <el-card>
      <!-- 头部 -->
      <QuestionsHeader />
      <!-- 表单 -->
      <QuestionsForm @onSubmit="onSubmit" />
      <!-- 条数 -->
      <QuestionsPagetool :counts="page.counts" />
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#fafafa' }"
      >
        <el-table-column prop="number" label="试题编号" width="220">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="80">
        </el-table-column>
        <el-table-column
          :formatter="questionType"
          prop="questionType"
          label="题型"
          width="80"
        >
        </el-table-column>
        <el-table-column
          :formatter="question"
          prop="question"
          label="题干"
          width="240"
        >
        </el-table-column>
        <el-table-column
          :formatter="addDate"
          prop="addDate"
          label="录入时间"
          width="180"
        >
        </el-table-column>
        <el-table-column
          :formatter="difficulty"
          prop="difficulty"
          label="难度"
          width="80"
        >
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div class="btn">
              <el-button
                type="primary"
                icon="el-icon-view"
                plain
                circle
                @click="lookQuestion(row.id)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                plain
                circle
                @click="$router.push({ path: '/questions/new', query: {id: row.id} })"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="removeQuestion(row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                plain
                circle
                @click="choiceAdd(row)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <MyPagination
        :page="page"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-card>
    <QuestionsPreview ref="QuestionsPreview" :questionVisible.sync="questionVisible"/>
  </div>
</template>

<script>
import { list, choiceAdd, remove } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
import { parseTime } from '@/utils'
import QuestionsForm from '../components/questions-form.vue'
import QuestionsPagetool from '../components/questions-pagetool.vue'
import QuestionsHeader from '../components/questions-header.vue'
import QuestionsPreview from '../components/questions-preview.vue'

export default {
  components: { QuestionsPagetool, QuestionsForm, QuestionsHeader, QuestionsPreview },
  data () {
    return {
      page: {
        page: 1,
        pagesize: 5,
        counts: 0
      },
      tableData: [],
      questionVisible: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 渲染列表
    async getList () {
      const { data } = await list(this.page)
      this.tableData = data.items
      this.page.counts = data.counts
    },
    // 格式化题型
    questionType (row, column, cellValue, index) {
      return questionType.find(item => item.value === cellValue)?.label
    },
    // 格式化难度
    difficulty (row, column, cellValue, index) {
      return difficulty.find(item => item.value === cellValue)?.label
    },
    // 格式化时间
    addDate (row, column, cellValue, index) {
      return parseTime(cellValue)
    },
    // 格式化题干
    question (row, column, cellValue, index) {
      return cellValue.replace(/<[^>]+>/g, '')
    },
    // 条数发生变化
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getList()
    },
    // 页数发生变化
    handleCurrentChange (val) {
      this.page.page = val
      this.getList()
    },
    // 查询
    async onSubmit (val) {
      const { data } = await list(val)
      this.tableData = data.items
      this.page.counts = data.counts
    },
    // 加入精选
    async choiceAdd (row) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await choiceAdd({ id: row.id, choiceState: '1' })
        this.$message({ type: 'success', message: '加入成功' })
        this.getList()
      } catch (e) {
        console.log(e)
      }
    },
    // 删除题库
    async removeQuestion (row) {
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({ id: row.id })
        this.$message({ type: 'success', message: '删除成功' })
        this.getList()
      } catch (e) {
        console.log(e)
      }
    },
    // 查看
    lookQuestion (id) {
      this.$refs.QuestionsPreview.id = id
      this.questionVisible = true
    }
  }
}
</script>

<style scoped lang='less'>
  .container {
    margin: 10px 0;
    padding: 0 10px;
    .el-table {
      margin-bottom: 20px;
      .btn {
        display: flex;
      }
    }
  }
</style>
